<style lang="scss" scoped>
.ar_cont {
  padding: 30px 30px;
  font-size: 15px;
  background: #fff;
  line-height: 25px;
  color: #666666;
}

.ar_cont .ar_cont_h1,
.ar_cont .ar_cont_price {
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  color: #000;
}

.ar_cont .ar_cont_price {
  color: #e64340;
  margin-left: 30px;
}

.ar_line {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 15px 0px;
}

.ar_book {
  background: #d24a58;
  font-size: 16px;
  color: #fff;
  border-radius: 0rpx;
  margin: 20px 0px 5px;
}
</style>

<template>
  <div ref="container" class="container hasNav hasTabbar">
    <van-nav-bar title="服务详情" left-arrow left-text="返回" @click-left="$router.back()" fixed />

    <van-swipe :height="225" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in galleryList" :key="index">
        <van-image fit="cover" :src="fileApi + item"></van-image>
      </van-swipe-item>
    </van-swipe>

    <div class="ar_cont">
      <span class="ar_cont_h1" v-html="serviceName"></span>
      <span class="ar_cont_price">价格：¥{{ linePrice }} </span>
      <p v-html="brief"></p>
      <div class="ar_line"></div>
      <span class="ar_cont_h1">详情描述</span>
      <p v-html="detail"></p>
      <van-button type="default" class="ar_book" block @click="linkReservationTo(id)">立即预定</van-button>
    </div>

    <Loading :isShow="loading"></Loading>
    <!-- 返回顶部 -->
    <back-top selector=".container"></back-top>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Loading from '@/components/Loading';
import Tabbar from '@/components/Tabbar';
import BackTop from '@/components/BackTop';
import { fileUrl, getServiceInfo } from '../../api/service';

export default {
  name: 'serviceDetail',
  components: {
    BackTop,
    Loading,
    Tabbar,
  },
  data() {
    return {
      fileApi: fileUrl,
      loading: true,
      id: 0,
      galleryList: [],
      serviceSn: '',
      serviceName: '',
      keyword: '',
      brief: '',
      unit: '',
      linePrice: 0.00,
      servicePrice: 0.00,
      detail: '',
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.getServiceDetail(id);
  },
  methods: {
    async getServiceDetail(id) {
      try {
        this.loading = true;
        const { code, message, data } = await getServiceInfo({ serviceId: id });
        if (code == 200) {
          if (data.length !== 0) {
            this.id = data.id;
            this.serviceSn = data.serviceSn;
            this.serviceName = data.serviceName;
            this.keyword = data.keyword;
            this.galleryList = data.gallery.split(',');
            this.brief = data.brief;
            this.unit = data.unit;
            this.linePrice = data.linePrice;
            this.servicePrice = data.servicePrice;
            this.detail = data.detail;
          }
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    linkReservationTo(id) {
      this.$router.push({
        path: '/service/reservation',
        query: { id }
      }, onComplete => {});
    },
  }
};
</script>